<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <div class="container">
            <div class="user signinBx">
                <div class="imgBx"><img src="login.png"></div>
                <div class="formBx">
                    <form action="/loginJsp" method="post">
                        <h2>System登录</h2>
                        <input type="text" placeholder="账号" name="account">
                        <input type="password" placeholder="密码" name="password">
                        <input type="submit" value="login">
                        <p class="signup">没有帐号吗？ <a href="#" onclick="toggleForm();">register</a></p>
                    </form>
                </div>
            </div>
            <div class="user signupBx">
                <div class="formBx">
                    <form action="/registerJsp" method="post">
                        <h2>System注册</h2>
                        <input type="text" placeholder="账号" name="account"/>
                        <input type="password" placeholder="密码" name="password">
                        <input type="text" placeholder="姓名" name="realName">
                        <input type="text" placeholder="性别" name="sex">
                        <input type="text" placeholder="电话" name="telephone">
                        <input type="submit" value="register">
                        <p class="signup">已经有账号了吗？<a href="#" onclick="toggleForm();">login</a></p>
                    </form>
                </div>
                <div class="imgBx"><img src="register.jpg"></div>
            </div>
        </div>
    </section>
    <script>
        function toggleForm(){
            section = document.querySelector('section');
            container = document.querySelector('.container');
            container.classList.toggle('active');
            section.classList.toggle('active');
        }
    </script>
</body>
</html>